<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-router传参</title>
    <script src="vue.js"></script>
    <script src="vue-router.min.js"></script>
    <style>
        .active {
            color: #f60;
        }
    </style>
    <script>
        /****
        单页面应用
        路由router 是把数据从一个地方传递到另一个地方的行为和动作
        vue-router.js
        使用步骤：
            1.定义组件
            2 配置路由
            3.创建路由实例,相当于一个管理者，来管理路由
            4.router实例注入到Vue
        路由取参数:
            1.$router.params.id // test/5 id是参数名称,名称是路由配置中:id 名称
            2.$router.query.id  // test?id=123
        */
        window.onload = function () {

            //1.定义组件
            var Home = {
                template: '#home'
            };

            var News = {
                template: '#news',
                data: function () {
                    return {
                        name: 'hanley'
                    }
                }
            };
            var Login = {
                template: '#login'
            };
            var Register = {
                template: '#register'
            };

            //2.配置路由
            var routes = [
                { path: '/home', component: Home },
                {
                    path: '/news/', component: News,
                    children: [
                        { path: 'login', component: Login },
                        { path: 'register', component: Register }
                    ]
                },
                { path: '/*', redirect: '/home' }//重定向
            ];

            //3.创建路由实例,相当于一个管理者，来管理路由
            var router = new VueRouter({
                routes, //表示接收routers参数
                linkActiveClass: 'active'//设定路由样式
            });
            new Vue({
                el: '#my',
                router, //4.router实例注入到Vue
                data: {
                    msg: 'hello world',
                    id: 200
                },
                methods: {
                    go_to_news: function () {
                        router.push({ path: '/news' });
                    }
                }

            });
        }

    </script>
</head>

<body>

    <template id="home">
        <div>
            <h2>Home</h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h2>user news</h2>
            <ul>
                <li>
                    <router-link to="/news/login">登录</router-link>
                </li>
                <li>
                    <router-link to="/news/register?type=abc">注册</router-link>
                </li>
                <router-view></router-view>
            </ul>
        </div>
    </template>

    <template id="login">
        <div>
            <h2>Login{{$router.params}} </h2>
        </div>
    </template>


    <template id="register">
        <div>
            <h2>Register {{$route.query.type}}</h2>
        </div>
    </template>


    <div id="my">
        <!--router-link 导航 ，默认被浏览器渲染成a标签-->
        <!-- to 属性指定跳转的连接，这个链接需要routers中已有对应路径-->
        <router-link to="/home">home</router-link>
        <router-link to="/news">news</router-link>
        <div>
            <!--出口文件，路由匹配的组件渲染在出口文件中-->
            <router-view></router-view>
        </div>
        <button @click="go_to_news">news</button>
    </div>
</body>

</html>